<template>
  <el-scrollbar style="height:500px">
    列表的 meta
    <el-row :gutter="10">
      <el-col :span="6">
        <elForm
          v-model="girdProps"
          :partModel="partModel"
          v-bind="gridBaseProps"
        />
      </el-col>
      <el-col :span="17">
        列表
        <elGrid
          v-tableget="tableInfo"
          v-tabledrag="tableInfo"
          v-bind="girdProps"
          :data-list="dataList"
        /><br>
      <el-button type="" @click="getTdWidth">设置列宽</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="23">
        <el-scrollbar style="height:500px">
          <jsonformat :json="girdProps" />
        </el-scrollbar>
      </el-col>
    </el-row>
  </el-scrollbar>
</template>

<script>
import { ref, reactive, watch, nextTick, onMounted } from 'vue'
// 状态
// eslint-disable-next-line import/no-absolute-path
import VueDS from '/nf-state'
// 列表控件的 base 的json
// import jsonGridBase from '../json/meta-grid-base.json'
import jsonGridBase from '../../../../public/json-plat/153-m-grid/form-10.json'
// table 的拖拽相关
import manageTable from '../../../control-web/nf-meta-manage/tableManage.js'
// 定义table的class名称
const tableClass = 'el-table__header'

</script>

<script setup>
/* eslint-disable import/no-absolute-path */
/* eslint-disable import/first */
import elForm from '/ctrl/nf-el-form/el-form-div.vue'
import elGrid from '/ctrl/nf-el-grid/nf-el-grid-list.vue'
import jsonformat from '../json-format/json-format.vue'

// 程序功能
// 定义局部的 model
const partModel = reactive({})
const gridBaseProps = reactive(jsonGridBase)
gridBaseProps.formColCount = 1

// ==============

// 表单的 model
const dataList = reactive([])
const dataRow = ref({})

// 状态
const { reg, get } = VueDS.useStore()
const helpDataBaseMeta = get.helpDataBaseMeta()

// 表的model
const modelTable = helpDataBaseMeta.tableMeta
// 字段的 model 数据列表
const modelColumList = helpDataBaseMeta.columnListMeta

// 定义表单的 meta
const girdProps = reactive({
  moduleId: modelTable.moduleId,
  height: 400, // 高度, int
  idName: 'id', // 主键字段名, varhcar
  foreignIdName: '', // 外键
  colOrder: [], // 显示字段, 数组
  stripe: true, // 斑马纹, bit
  border: true, // 纵向边框, bit
  fit: true, // 是否自撑开, bit
  highlightCurrentRow: true, // 要高亮当前行, bit
  itemMeta: {},
  reload: false
})

// 根据数据设置表单需要的meta
const setGridMeta = () => {
  dataRow.value = {}
  for (const key in modelColumList) {
    const item = modelColumList[key]
    // console.log(key, item)
    const colId = parseInt(item.columnId)
    // 添加 colOrder
    if (!girdProps.colOrder.includes(colId)) {
      girdProps.colOrder.push(colId)
    }
    if (!girdProps.colOrder.includes(colId)) {
      girdProps.colOrder.push(colId)
    }
    // 添加 itemMeta
    girdProps.itemMeta[colId] = {
      id: colId,
      colName: item.colName,
      label: item.cnName,
      width: 140,
      title: item.cnName,
      align: 'center',
      'header-align': 'center'
    }
    dataRow.value[item.colName] = item.cnName

    // 设置 表单控件基础属性的 显示字段
    const options = gridBaseProps.itemMeta['110050'].optionList
    if (options.filter((a) => a.value === colId).length === 0) {
      options.push({
        value: colId,
        label: item.cnName
      })
    }
  }

  girdProps.reload = !girdProps.reload
  // 添加测试数据
  dataList.length = 0
  for (const item of [1, 2, 3].values()) {
    const newRow = {}
    Object.assign(newRow, dataRow.value)
    dataList.push(newRow)
  }
}

// 监听字段
watch(() => modelColumList, () => {
  setGridMeta()
  nextTick(() => {
    tableInfo.setThforDrag(tableClass, dragInfo)
  })
},
{ deep: true })

// 拖拽部分===============================

const tableInfo = {
  getTdwidth: () => {
    console.log('原始的获取td的函数')
  },
  setThforDrag: () => {
    console.log('原始的设置td的函数')
  }
}

const dragInfo = reactive({
  offsetX: 0,
  isLeft: true, // 是否在 th 的左侧结束拖拽
  ctrl: false, // 是否按下了ctrl
  source: '',
  target: '',
  sourceIndex: 0, // 开始拖拽的位置
  targetIndex: 0 // 结束拖拽的位置
})

const { setThOrder } = manageTable(girdProps, dragInfo, tableInfo, tableClass)
onMounted(() => {
  nextTick(() => {
    tableInfo.setThforDrag(tableClass, dragInfo)
    watch(() => dragInfo, () => {
      // console.log('外部：', dragInfo)
      setThOrder()
    },
    { deep: true })
  })
})

const getTdWidth = () => {
  const arrWidth = tableInfo.getTdwidth() // _getTableTdWidth()
  console.log('获取td的宽度：', arrWidth)
  for (let i = 0; i < girdProps.colOrder.length; i++) {
    const width = arrWidth[i + 1]
    const colId = girdProps.colOrder[i]
    girdProps.itemMeta[colId].width = width
  }
}

</script>
